<template>
  <div class="app-container">
     <!-- 标题 -->
    <header class="app-header">
      <span class="title">{{$route.meta.title}}</span>
      <el-button type="primary" icon="el-icon-edit" @click.native="addChannel">添加频道</el-button>
    </header> 
		
    <el-form :inline="true" :model="listQuery" class="query-form">
      <el-form-item class="query-form-item">
      	<el-input v-model="listQuery.channelName" :clearable = "true" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="el-icon-search"  @click="onSubmit">查询</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    
    <el-table v-loading="loading" :data="list" border>
       <el-table-column align="center" width="170" label="频道ID" prop="id"/>
       <el-table-column align="center" label="英文名称" prop="channelName"/>
       <el-table-column align="center" label="中文名称" prop="channelTitle"/>
       <el-table-column align="center" width="160" label="状态" prop="status" >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ccc" @change="changeStatus(scope.row)"></el-switch>
          </template>
       </el-table-column>
       <el-table-column align="center" width="160" label="类型" prop="channelType" />
    	 <el-table-column align="center" width="150" label="排序">
					<template slot-scope="scope">
          	<svg-icon v-show="scope.$index == 0" class="down-arrow" @click="goToSort('down',scope.$index)" icon-class="arrow" />
            <svg-icon v-show="scope.$index > 0" class="up-arrow" @click="goToSort('up',scope.$index)" icon-class="arrow" />
          </template>
       </el-table-column>
       <el-table-column align="center" width="220" label="操作" >
       	 <el-button-group slot-scope="scope">
       		<el-button type="primary" size="mini" @click.native="handleSet(scope.$index, scope.row)">配置</el-button>
					<el-button type="warning" size="mini" @click.native="handleForm(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click.native="handleDel(scope.$index, scope.row)">删除</el-button>
       	 </el-button-group>
       </el-table-column> 
    </el-table>
  
  
    <el-dialog :title="formTitle" :visible.sync="formVisible" :before-close="hideForm" :close-on-click-modal="false" width="50%" top="5vh">
        <el-form :model="formData" :rules="formRules" ref="dataForm">
            <el-form-item label="频道名称" label-width="90px"  prop="channelName">
                <el-input v-model="formData.channelName" placeholder="请输入英文频道名称" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="频道标题" label-width="90px"  prop="channelTitle">
                <el-input v-model="formData.channelTitle" placeholder="请输入中文频道名称" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="频道类型" label-width="90px"  prop="channelType">
                <el-input v-model="formData.channelType" placeholder="用于多平台频道分类" auto-complete="off"></el-input>
            </el-form-item> 
            <el-form-item label="页面标题" label-width="90px"  prop="pageTitle">
                <el-input v-model="formData.pageTitle" placeholder="用于频道页Title的显示" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="页面描述" label-width="90px"  prop="pageDescription">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="formData.pageDescription" placeholder="用于频道页Description的显示" auto-complete="off"></el-input>
            </el-form-item>                        
            <el-form-item label="状态" label-width="90px" prop="status">
                <el-radio-group v-model="formData.status">
                		<el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>                       					
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="hideForm">取消</el-button>
            <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
        </div>         
    </el-dialog>  
    
  </div>
</template>
<script>
import request from '@/utils/request'
import config from '@/api/bgapi'
const formData = {channelName:'',channelTitle:'',status:1,orderNo:0};
export default {
  data() {
    return {
			listQuery: {channelName: ''},
			loading:true,
			formVisible:false,
			formLoading:false,
			formRules:{
				channelName: [{ required: true, message: "请输入频道名称", trigger: "blur" }],
				channelTitle: [{ required: true, message: "请输入频道名称", trigger: "blur" }]	
			},
			formCurEditId:'',
			formTitle:'添加频道',
			formData:formData,
			list:[],
		}
  },
  mounted(){
		this.getList();
  },
  methods: {
		async getList(){
			this.loading = true;
			var res = await request.get(config.channel,{params:this.listQuery});
			this.loading = false;	
			if(res.code == '20000'){
				this.list = res.data;
			}
		},
		addChannel(){
			this.formVisible = !this.formVisible;
			this.formCurEditId = '';
			this.formTitle = '添加频道';
			this.formData = formData;
		},
		async formSubmit(){
			if(this.formCurEditId == ''){
				this.formLoading = true;
				var res = await request.post(config.channel,this.formData);
				this.formLoading = false;
				if(res.code == '20000'){
					this.$message.success("频道添加成功");
					this.formVisible = false;
					this.resetForm();
					this.getList(); 
				}				
			}else{
				this.formLoading = true;
				var res = await request.put(config.channel+'/'+this.formCurEditId,this.formData);
				this.formLoading = false;
				if(res.code == '20000'){
					this.$message.success("频道修改成功");
					this.formVisible = false;
					this.resetForm();
					this.getList(); 
				}					
			}
		},
		handleDel(index, row){
      if (row.id) {
        this.$confirm("确认删除该记录吗?", "提示", {
            type: "warning",
        })
        .then(async () => {
            var res = await request.delete(config.channel+'/'+row.id);
            if(res.code == '20000'){
              this.$message.success("删除成功");  
              this.list.splice(index, 1);	
            }
        })
        .catch(() => {
            this.$message.info("取消删除");
        });
      }				
    },
		async changeStatus(row){
			var res = await request.put(config.channel+'/'+row.id,{status:row.status});
			if(res.code != '20000'){
			 this.$message.info("状态更改失败");
			}
		},
		async goToSort(type,index){
			if(type == 'up'){
				var _id = this.list[index].id;
				var _orderNo = this.list[index].orderNo;
				var _prevId = this.list[index-1].id;;
				var _prevOrderNo = this.list[index-1].orderNo;	
				await request.put(config.channel+'/'+_id,{orderNo:_prevOrderNo});
				await request.put(config.channel+'/'+_prevId,{orderNo:_orderNo});								
			}else if(type == 'down'){
				var _id = this.list[index].id;
				var _orderNo = this.list[index].orderNo;
				var _nextId = this.list[index+1].id;;
				var _nextOrderNo = this.list[index+1].orderNo;	
				await request.put(config.channel+'/'+_id,{orderNo:_nextOrderNo});
				await request.put(config.channel+'/'+_nextId,{orderNo:_orderNo});					
			}
			this.$message.success("修改排序成功"); 
			this.getList();			
		},
		handleForm(row){
			this.formVisible = !this.formVisible;
			this.formCurEditId = row.id;
			this.formTitle = '编辑频道';
			this.formData = {...row};	
		},
		handleSet(index,row){
			this.$router.push({path:'/channel/setting',query: {id:row.id}})
		},		
		onSubmit(){
			this.getList();
		},
    resetForm() {
			if (this.$refs["dataForm"]) {
				// 清空验证信息表单
				this.$refs["dataForm"].clearValidate();
				// 刷新表单
				this.$refs["dataForm"].resetFields();
			}
    }, 		
		hideForm() {
      // 更改值
      this.formVisible = !this.formVisible;
      this.resetForm();
      return true;
		},		
	},
  filters: {},  
}
</script>
<style scoped>
.up-arrow{color: #1890FF; transform: rotate(180deg); margin:0 1px; cursor:pointer;}
.down-arrow{color: #1890FF; position:relative; top:1px; margin:0 1px; cursor:pointer;}
</style>